import { FC } from 'react';
import { Table, TableColumnProps, Button, Switch } from 'antd';
import * as styles from './style.less';
import { ITableConfig, IUserListData, IUserListDataUser } from './interface';
import {
  DeleteOutlined,
  EditOutlined,
  SettingOutlined,
} from '@ant-design/icons';
import { Dispatch } from 'umi';

interface IUerListTableProps {
  users: Partial<IUserListDataUser>[];
  total: number;
  dispatch: Dispatch;
}
const UserListTable: FC<IUerListTableProps> = ({ users, total, dispatch }) => {
  //把表头的数据封装 方便给Table组件
  const tableConfig: ITableConfig = {
    columns: [
      {
        width: 20,
        fixed: 'left',
        render(text, record, index) {
          return index + 1;
        },
        // render: (currentInfo) => {
        //   return currentInfo + 1;
        // },
      },
      {
        title: '用户名',
        width: 100,
        dataIndex: 'username', //接口的字段
        fixed: 'left',
      },
      {
        title: '邮箱',
        dataIndex: 'email',
        width: 100,
      },
      {
        title: '电话',
        dataIndex: 'mobile',
        width: 100,
        // ellipsis: true,
      },
      {
        title: '角色',
        dataIndex: 'role_name',
        key: '3',
        width: 100,
      },
      {
        title: '状态',
        dataIndex: 'mg_state',
        key: '4',
        width: 100,
        render(currentInfo, {id,mg_state}) {
          // console.log('currentInf1o', currentInfo);
          return (
            <div>
              <Switch
                defaultChecked
                onClick={() => {
                  console.log('c', id);
                  console.log(currentInfo);
                  dispatch({
                    type: 'userList/modifyUser',
                    params: {
                      uId: id,
                      type: mg_state,
                    },
                  });
                }}
              />
            </div>
          );
        },
      },
      {
        title: '操作',
        fixed: 'right',
        width: 100,
        // render: ({ id }) => {
        //   return (
        //     <div>
        //       <Button type="primary" danger icon={<EditOutlined />}></Button>
        //       <Button
        //         type="primary"
        //         icon={<DeleteOutlined />}
        //         onClick={() => {
        //           remove(id);
        //         }}
        //       ></Button>
        //       <Button
        //         style={{ background: '#e6a23c', color: 'white' }}
        //         icon={<SettingOutlined />}
        //         onClick={() => {
        //           // console.log(currentInfo);
        //           // console.log('c', c);
        //           // console.log('index', index);
        //         }}
        //       ></Button>
        //     </div>
        //   );
        // },
        render({ id }) {
          return (
            <div>
              <Button type="primary" danger icon={<EditOutlined />}></Button>
              <Button
                type="primary"
                icon={<DeleteOutlined />}
                onClick={() => {
                  remove(id);
                }}
              ></Button>
              <Button
                style={{ background: '#e6a23c', color: 'white' }}
                icon={<SettingOutlined />}
                // onClick={() => {
                //   console.log('currentInfo', currentInfo);
                //   // console.log('c', c);
                //   // console.log('index', index);
                // }}
              ></Button>
            </div>
          );
        },
      },
    ],
  };
  //删除
  const remove = (id: any) => {
    dispatch({
      type: 'userList/removeUser',
      params: {
        id,
      },
    });
  };
  //分页
  const onChange = (pagination: any) => {
    // console.log('pagination', pagination);
    dispatch({
      type: 'userList/getUserList',
      params: {
        query: '',
        pagenum: pagination.current,
        pagesize: 10,
      },
    });
  };
  return (
    <div className={styles.user_list_table}>
      <Table
        {...tableConfig}
        dataSource={users}
        pagination={{ position: ['bottomLeft'], total }}
        scroll={{ x: true, y: '500px' }}
        rowKey="1"
        onChange={onChange}
      />
    </div>
  );
};
export default UserListTable;
